import React, { Component } from 'react'
import Input from './../input/input'
import View from './../view/view.js'
import './index.scss'
import Popper from './popper.js'

export default class Demo1 extends Component {
  constructor (props) {
    super(props)
    this.count = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
    this.state = {
      isShowCtn: false, // 是否显示下拉
      isShowItem: false // 是否显示第二个下拉
    }
    this.createPopper = this.createPopper.bind(this)
  }
  componentDidMount () {
    this.tbcPopperRef = this.refs.tbcPopperRef
    this.tbcPopperCtn = this.refs.tbcPopperCtn
    this.popperGreen = this.refs.popperGreen
    this.tbcPopperItem = this.refs.tbcPopperItem
    document.addEventListener('click', this.clickEventHandle.bind(this))
  }
  clickEventHandle () {
    if (this.state.isShowCtn) {
      this.setState({
        isShowCtn: false,
        isShowItem: false
      })
    }
  }
  /**
   * 
   */
  onClickInput (e) {
    this.setState({
      isShowCtn: true
    })
  }
  beforeEnterCtn () {
    this.popper ? this.popper.update() : this.createPopper()
  }
  createPopper () {
    this.popper = new Popper(this.tbcPopperRef, this.tbcPopperCtn, {
      placement: 'bottom',
      presetFn (ref, ctn) {
      },
      offsetFn (ref, ctn) {
      }
    })
  }
  /**
   * 
   */
  onClickItem (e) {
    e.nativeEvent.stopImmediatePropagation()
    this.setState({
      isShowItem: true
    })
  }
  beforeEnterItem () {
    this.popperItem ? this.popperItem.update() : this.createPopperItem()
  }
  createPopperItem () {
    this.popperItem = new Popper(this.popperGreen, this.tbcPopperItem, {
      placement: 'left'
    })
  }
  render () {
    return (
      <div className="tbcPopperMain">
      <div className="tbcPopperMainInner">
        <div
          ref="tbcPopperRef"
          className="tbcPopperRef"
          onClick={this.onClickInput.bind(this)}>
          <Input></Input>
        </div>
        <div className="placeHolder">占位</div>
        <div className="placeHolder">占位</div>
        <View
          show={this.state.isShowCtn}
          name='slide-down'
          beforeEnter={this.beforeEnterCtn.bind(this)}>
          <div
            ref="tbcPopperCtn"
            className="tbcPopperCtn">
            <div>蓝</div>
            <div ref="popperGreen"
            onClick={this.onClickItem.bind(this)}>绿</div>
            { 
              this.count.map(u => {
                return(<div key={u}>{u}</div>)
              })
            }
          </div>
        </View>
        <div className="placeHolder">占位</div>
        <div className="placeHolder">占位</div>
        <View
          show={this.state.isShowItem}
          name='slide-down'
          beforeEnter={this.beforeEnterItem.bind(this)}
        >
          <div
          className="tbcPopperCtn"
          ref="tbcPopperItem">
            <div>条目1</div>
            <div>条目2</div>
            {
              this.count.map(u => {
                return(<div key={u}>u</div>)
              })
            }
          </div>
        </View>
      </div>
      </div>
    )
  }
} 